<template>
    <div class="box">
    <a-card :bordered="false" style="width: 100%">
      <slot slot="title">
        <a-breadcrumb>
          <a-breadcrumb-item>系统设置</a-breadcrumb-item>
          <a-breadcrumb-item>操作日志</a-breadcrumb-item>
        </a-breadcrumb>
        <span class="title">操作日志</span>
      </slot>
      <a-row>
        <a-col :span="8" align="middle" justify="center">
          <span>操作人: </span>
          <a-input v-model="value" placeholder="请输入" />
        </a-col>
        <a-col :span="8" :offset="8" align="“center”">
          <ContextButton :loading="loading" conText="查询" type="primary" />
          <ContextButton conText="重置" class="resectBtn" />
        </a-col>
      </a-row>
    </a-card>

    <div class="mine">
        <div class="til">
                <span class="left">操作记录</span>
                <ContextButton conText="导出" class="derive" />
        </div>
            <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" />
        </div>
    </div>
</template>


<script>
const columns = [
  {
    title: '操作时间',
    dataIndex: '操作时间',
  },
  
  {
    title: '操作人',
    dataIndex: '操作人',
  },
  {
    title: '操作模块',
    dataIndex: '操作模块',
  },
  {
    title: '操作内容',
    dataIndex: '操作内容',
  }
];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    操作时间: '2020-09-08 10:45:00',
    操作人: `司空摘星`,
    操作模块: `业主管理`,
    操作内容: `新增业主信息`,
  });
}

export default {
    name:'OperationLog',
  data() {
    return {
      data,
      columns,
      selectedRowKeys: [], // Check here to configure the default column
    };
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        selectedRowKeys,
        onChange: this.onSelectChange,
        hideDefaultSelections: true,
        selections: [
          {
            key: 'all-data',
            text: 'Select All Data',
            onSelect: () => {
              this.selectedRowKeys = [...Array(46).keys()]; // 0...45
            },
          },
          {
            key: 'odd',
            text: 'Select Odd Row',
            onSelect: changableRowKeys => {
              let newSelectedRowKeys = [];
              newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                if (index % 2 !== 0) {
                  return false;
                }
                return true;
              });
              this.selectedRowKeys = newSelectedRowKeys;
            },
          },
          {
            key: 'even',
            text: 'Select Even Row',
            onSelect: changableRowKeys => {
              let newSelectedRowKeys = [];
              newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                if (index % 2 !== 0) {
                  return true;
                }
                return false;
              });
              this.selectedRowKeys = newSelectedRowKeys;
            },
          },
        ],
        onSelection: this.onSelection,
      };
    },
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 1136px;
  
}
::v-deep .ant-input {
    width: 72%;
    margin-left: 8px;
  }

.title {
  color: rgba(0, 0, 0, 0.8);
  font: 700 20px "微软雅黑";
  box-sizing: border-box;
}
::v-deep .ant-breadcrumb {
  margin-bottom: 10px;
}
.resectBtn {
  margin-left: 10px;
}

.mine {
        padding: 20px;
        box-sizing: border-box;
         margin-top: 20px;
         width: 1136px;
        background-color: #ffffff;
        .til{
            display: flex;
            justify-content: space-between;
            padding: 20px;
            .left{
                font-size: 17px;
                color: #000;
            }
            .derive{
                width: 91px;
                height: 30px;
                border-radius: none;
                font-size: 16px;
            }
        }
    }

</style>